class Cart {
  constructor() {}
  //1.获取商品的总数量
  getGoodsNum() {
    // 获取数量
    let oGoodsNum = document.querySelectorAll(".goods-num");
    //获取总数量
    let oGoodsTotalNum = document.querySelector(".goods-total-num");
    let ooodsTotalNum = 0;
    //对数量进行遍历循环
    for (let i = 0; i < oGoodsNum.length; i++) {
      ooodsTotalNum += Number(oGoodsNum[i].innerHTML);
    }
    oGoodsTotalNum.innerHTML = ooodsTotalNum;
  }
  //2.获取商品的总金额
  getGoodsPrice() {
    //获取小计
    let oGoodsSinglePrice = document.querySelectorAll(".goods-single-price");
    //获取总金额
    let oGoodsTotalPrice = document.querySelector(".goods-total-price");
    let ogoodsTotalPrice = 0;

    for (let i = 0; i < oGoodsSinglePrice.length; i++) {
      ogoodsTotalPrice += Number(oGoodsSinglePrice[i].innerHTML);
    }
    oGoodsTotalPrice.innerHTML = ogoodsTotalPrice;
  }
  //3.获取小计
  getPrice(num, price) {
    return num * price;
  }
  //4.增加商品
  addGoods(btn) {
    //1.获取数量
    let ogoodsnum = btn.previousElementSibling;
    ogoodsnum.innerHTML = Number(ogoodsnum.innerHTML) + 1;
    //2.获取单价
    let ogoodsunitprice = btn.parentNode.nextElementSibling.firstElementChild;
    //3.获取小计
    let ogoodssingleprice =
      btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
    ogoodssingleprice.innerHTML = this.getPrice(
      ogoodsunitprice.innerHTML,
      ogoodsnum.innerHTML
    );

    this.getGoodsNum();
    this.getGoodsPrice();
  }
  //5.减少商品
  minGoods(btn) {
    //1.获取数量
    let ogoodsnum = btn.nextElementSibling;
    if (ogoodsnum.innerHTML > 0) {
      ogoodsnum.innerHTML = Number(ogoodsnum.innerHTML) - 1;
      let ogoodsunitprice = btn.parentNode.nextElementSibling.firstElementChild;
      //3.获取小计
      let ogoodssingleprice =
        btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
      ogoodssingleprice.innerHTML = this.getPrice(
        ogoodsunitprice.innerHTML,
        ogoodsnum.innerHTML
      );

      this.getGoodsNum();
      this.getGoodsPrice();
    }
  }
  //删除商品
  delGoods(btn) {
    let otr = btn.parentNode.parentNode;
    otr.remove();
    this.getGoodsNum();
    this.getGoodsPrice();
  }
  //追加商品
  sumGoods(btn) {
    //1.获取第一个tbody
    let tbody = document.querySelector("tbody");
    //2.获取新增的商品的名字
    let GoodsName =
      btn.parentNode.previousElementSibling.previousElementSibling.innerHTML;
    //3.获取新增商品的单价
    let GoodsPrice =
      btn.parentNode.previousElementSibling.firstElementChild.innerHTML;
    // 4.设置变量
    let flag = false;
    //5.设置下标
    let index = 0;
    //循环遍历上面的表格
    for (let i = 0; i < tbody.children.length - 1; i++) {
      if (tbody.children[i].firstElementChild.innerHTML == GoodsName) {
        flag = true;
        index = i;
        break;
      }
    }
    //如果flag为true
    if (flag) {
      // 数量
      tbody.children[index].children[1].children[1].innerHTML =
        Number(tbody.children[index].children[1].children[1].innerHTML) + 1;
      // 数量
      let SL = tbody.children[index].children[1].children[1].innerHTML;
      //单价
      let DJ = tbody.children[index].children[2].firstElementChild;
      //小计
      let XJ = tbody.children[index].children[3].firstElementChild;

      XJ.innerHTML = this.getPrice(SL, DJ.innerHTML);
    } else {
      let tr = document.createElement("tr");
      tr.innerHTML = `
                <td>${GoodsName}</td>
                <td>
                    <button>-</button>
                    <span class="goods-num">1</span>
                    <button>+</button>
                </td>
                <td>
                    单价:<span class="goods-unit-price">${GoodsPrice}</span>
                </td>
                <td>
                    小计:<span class="goods-single-price">8</span>
                </td>
                <td>
                    操作:<input type="button" value="删除" />
                </td>
                `;
      tbody.insertBefore(tr, tbody.lastElementChild);
    }
    this.getGoodsPrice();
    this.getGoodsNum();
    this.eventBind();
  }
  //测试
  eventBind() {
    this.getGoodsNum();
    this.getGoodsPrice();
    let that = this;
    let obtn = document.querySelectorAll("button");
    for (let i = 0; i < obtn.length; i++) {
      if (i % 2) {
        obtn[i].onclick = function () {
          that.addGoods(this);
        };
      } else {
        obtn[i].onclick = function () {
          that.minGoods(this);
        };
      }
    }
    let btn = document.querySelectorAll("input");
    for (let i = 0; i < btn.length; i++) {
      btn[i].onclick = function () {
        that.delGoods(this);
      };
    }
    //追加商品
    let obtns = document.querySelectorAll(".obtn");
    for (let i = 0; i < obtns.length; i++) {
      obtns[i].onclick = function () {
        that.sumGoods(this);
      };
    }
  }
}
